<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>博客</title>
    <link href="<%=basePath%>/bootstrap/css/blog-home.css"/>
    <link href="<%=basePath%>/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="background-color: #a6e1ec">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.jsp" target="_self">博客</a>
        </div>
        <!--导航链接，表格，和切换其他内容-->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li><a href="<%=basePath %>index.jsp" target="_self">网站首页</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"  class="btn btn-default">登录</a></li>
                <li><a href="register.jsp" target="_self">注册</a></li>
            </ul>
        </div>
    </div>
</nav>
<c:if test="${null!=errorMsg}">	<%-- 登录验证失败提示信息 --%>
    <div class="container" style="position: absolute;top: 60px;left: 380px">
        <div class="alert alert-warning"><!--Glyphicons字体图标错误消息-->
                ${errorMsg}
        </div>
    </div>
    <%
        request.getSession().removeAttribute("errorMsg");
    %>
</c:if>
<c:if test="${null!=logoutMsg}">	<%-- 登录验证失败提示信息 --%>
    <div class="container" style="position: absolute;top: 60px;left: 380px">
        <div class="alert alert-warning"><!--Glyphicons字体图标错误消息-->
                ${logoutMsg}
        </div>
    </div>
    <%
        request.getSession().removeAttribute("logoutMsg");
    %>
</c:if>
<c:if test="${null!=userIsDeleMsg}"> <%-- 用户被禁用提示信息 --%>
    <div class="container" style="position: absolute;top: 60px;left: 380px">
        <div class="alert alert-warnings">
                ${userIsDeleMsg}
        </div></div>
    <%
        request.getSession().removeAttribute("userIsDeleMsg");
    %>
</c:if>
<div class="container">
    <div class="row col-md-3" style="position: absolute;left: 700px;top: 200px"><!--中等屏幕（桌面显示器，大于等于 992px）-->
        <form name="login_form" role="form" action="<%=basePath%>LoginServlet?method=user1"
              method="POST" onsubmit="return isValidate();"><!--客户端验证-->
            <fieldset>
                <h4 style="text-align: center;color: #2b669a">${success}</h4>
                <div id="legend">
                    <legend class="caption" style="text-align: center;"><h3>博客登录</h3></legend>
                </div>
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text"
                           class="form-control " name="username" id="username"
                           placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="password">密码</label> <input type="password"
                                                            class="form-control" name="password" id="password"
                                                            placeholder="输入密码">
                </div>
                <br/>
                <div class="form-group">
                    <input type="text" id="yanzhen" style="width: 140px;height: 40px"/>
                    <img src="servlet/IdentityServlet" id="identity" onload="btn.disabled=false;" />
                    <input type=button value="换个图片" onclick="reloadImage()" id="btn">
                    <div id="message"></div>
                    <div id="path" style="display:none;"><%=path%></div>
                </div>
                <div class="form-group" style="text-align: center;font-size: 20px">
                    用&nbsp;户
                    <input type="radio"  value="0" name="type" checked="checked">
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                    管理员
                    <input type="radio"  value="1" name="type">
                </div>
                <div class="form-group" style="text-align: center">
                    <button type="submit" class="btn btn-success" style="width: 80px;height: 50px">登录</button>
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                    <a href="register.jsp" target="_self" class="btn btn-info" style="width: 80px;height: 50px;line-height: 40px;">注册</a>
                </div>
            </fieldset>
        </form>
    </div>
</div>
<div style="position: absolute;top: 70px"><audio autoplay="autoplay" loop="true" controls="controls"><source src="music/2.mp3"></audio></div>
<div class="container" style="position: absolute;left: 340px;bottom: 20px">
    <hr>
    <footer style="text-align: center">
        <div class="row">
            <div class="col-lg-12">
                <p>
                    &middot;网站创建到目前访问人数：<%=(Integer)session.getAttribute("num") %>
                </p>
            </div>
        </div>
    </footer>
</div>
</body>
<script type="text/javascript">
    function isValidate() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        var yanzhen = document.getElementById("yanzhen").value;
        var info = document.getElementById("message").innerHTML;
        if (username == "" || password == "" || yanzhen == "") {
            alert("请填写用户名和密码和验证码！");
            return false;
        }
        if (info != "") {
            return false;
        }
        return true;
    }
    function createXMLHttpRequest() {
        var xmlHttp;
        try {
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            //适用于IE6
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                //适用于IE5及更早的版本
                try {
                    xmlHttp = ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {

                }
            }
        }
        return xmlHttp;
    }

    document.getElementById("yanzhen").onblur = function () {
        var yanzhen = document.getElementById("yanzhen").value;
        var message = document.getElementById("message");
        var path = document.getElementById("path").innerText;
        if (yanzhen == "") {
            return ;
        }
        var xmlhttp = createXMLHttpRequest();
        xmlhttp.onreadystatechange = function () {      //监听ajax数据返回
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var data = xmlhttp.responseText;
                message.innerHTML = "";
                return;
            } else {
                message.innerHTML = "<span id='info' style='color:red;'>验证码错误</span>";
                setTimeout(reloadImage,3000);
            }
        }
        xmlhttp.open("POST", path+"/LoginServlet?method=ajax1&name=" + yanzhen, true);
        xmlhttp.send();
    }

    function reloadImage() {
        document.getElementById('btn').disabled = true;
        document.getElementById('identity').src = 'servlet/IdentityServlet?ts=' + new Date().getTime();
    }
</script>
</html>

